From 70b4f633a6fbedb58c8b9134ac64ede854d489de Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Mon, 20 Nov 2023 12:27:46 +0100 Subject: refactor(components): replace PageLayout template with Page * split pages in smaller components (it is both easier to maintain and more readable, we avoid the use of fragments in pages directory) * extract breadcrumbs from article tag (the navigation is not related to the page contents) * remove useReadingTime hook * remove layout options except `isHome` --- src/pages/thematique/[slug].tsx | 141 ++++++++++++++++------------------------ 1 file changed, 57 insertions(+), 84 deletions(-) (limited to 'src/pages/thematique/[slug].tsx') diff --git a/src/pages/thematique/[slug].tsx b/src/pages/thematique/[slug].tsx index 9220ccd..b8518c5 100644 --- a/src/pages/thematique/[slug].tsx +++ b/src/pages/thematique/[slug].tsx @@ -9,11 +9,12 @@ import { getLayout, Heading, LinksWidget, - PageLayout, PostsList, - Time, - MetaList, - MetaItem, + Page, + PageHeader, + PageSidebar, + TocWidget, + PageBody, } from '../../components'; import { getAllThematicsSlugs, @@ -34,7 +35,7 @@ import { getWebPageSchema, } from '../../utils/helpers'; import { loadTranslation, type Messages } from '../../utils/helpers/server'; -import { useBreadcrumb } from '../../utils/hooks'; +import { useBreadcrumb, useHeadingsTree } from '../../utils/hooks'; export type ThematicPageProps = { currentThematic: Thematic; @@ -53,6 +54,7 @@ const ThematicPage: NextPageWithLayout = ({ title, url: `${ROUTES.THEMATICS.INDEX}/${slug}`, }); + const { ref, tree } = useHeadingsTree({ fromLevel: 2 }); const { asPath } = useRouter(); const webpageSchema = getWebPageSchema({ @@ -85,9 +87,14 @@ const ThematicPage: NextPageWithLayout = ({ id: '/42Z0z', }); const pageUrl = `${CONFIG.url}${asPath}`; + const tocTitle = intl.formatMessage({ + defaultMessage: 'Table of Contents', + description: 'PageLayout: table of contents title', + id: 'eys2uX', + }); return ( - <> + {seo.title} {/*eslint-disable-next-line react/jsx-no-literals -- Name allowed */} @@ -105,81 +112,28 @@ const ThematicPage: NextPageWithLayout = ({ // eslint-disable-next-line react/no-danger -- Necessary for schema dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }} /> - + - } - /> - {dates.update ? ( - } - /> - ) : null} - {articles ? ( - - ) : null} - - } - widgets={ - topics - ? [ - - {thematicsListTitle} - - } - items={getLinksItemData(thematics)} - // eslint-disable-next-line react/jsx-no-literals -- Key allowed - key="thematics" - />, - - {topicsListTitle} - - } - items={getLinksItemData(topics)} - // eslint-disable-next-line react/jsx-no-literals -- Key allowed - key="related-topics" - />, - ] - : [] - } - > + meta={{ + publicationDate: dates.publication, + total: articles?.length, + updateDate: dates.update, + }} + /> + + {tocTitle}} + tree={tree} + /> + + {/*eslint-disable-next-line react/no-danger -- Necessary for content*/}
{articles ? ( @@ -202,13 +156,32 @@ const ThematicPage: NextPageWithLayout = ({ /> ) : null} - - + + + + {thematicsListTitle} + + } + items={getLinksItemData(thematics)} + /> + {topics ? ( + + {topicsListTitle} + + } + items={getLinksItemData(topics)} + /> + ) : null} + + ); }; -ThematicPage.getLayout = (page) => - getLayout(page, { useGrid: true, withExtraPadding: true }); +ThematicPage.getLayout = (page) => getLayout(page); type ThematicParams = { slug: string; -- cgit v1.2.3